<template>
  <div class="layout">
    <Layout>
      <Layout :style="{ padding: '0 24px 24px' }">
        <Breadcrumb :style="{ margin: '24px 0' }">
          <BreadcrumbItem>请在这里查看你的信箱喔</BreadcrumbItem>
        </Breadcrumb>
        <Content :style="{ padding: '24px', minHeight: '580px', background: '#fff' }">
          <div style="float: left;padding-left: 60%;">
            <Button type="warning" @click="flesh">刷新</Button>
          </div>
          <div style="padding-left:0.5cm;float: left;">
            <Button type="primary" @click="changepro">切换协议</Button>
          </div>
          <div style="padding-left:0.5cm;float: left;">
            <p style="font-size: 20px;color: rgb(13, 19, 24);">当前协议：</p>
          </div>
          <div style="padding-left:0.2cm;float: left;">
            <p style="font-size: 20px;color: cornflowerblue;font-weight: 300;">{{ protocol }}</p>
          </div>
          <br><br>
          <div v-for="(item, index) in emails" :key="item.emailID">
            <PageHeader
              :breadcrumb-list="breadcrumbList"
              :tab-list="tabList"
              :title="item.senderNickname"
              :logo="icons[index % 4].icon"
            >
              <template #action>
                <ButtonGroup>
                  <Button type="primary" @click="showEmail(index, item.emailID)">查看</Button>
                </ButtonGroup>
                <Button type="error" @click="deleteEmail(item.emailID)">删除</Button>
              </template>
              <template #content>
                <DescriptionList :col="2">
                  <Description term="发件人">{{ item.sender }}</Description>
                  <Description term="主题：">{{ item.subject }}</Description>
                  <Description term="发送时间：">{{ item.sendTime }}</Description>
                  <Description term="收藏：">
                    <div v-if="item.flagged">
                      <a style="font-size: 15px;color: rgb(40, 85, 168);" @click="toggleFlag(item.emailID, item.flagged)">已收藏</a>
                    </div>
                    <div v-else>
                      <a style="font-size: 15px;color: rgb(160, 179, 20);" @click="toggleFlag(item.emailID, item.flagged)">未收藏</a>
                    </div>
                  </Description>
                </DescriptionList>
              </template>
              <template #extra>
                <p style="color: hsl(223, 9%, 54%)">状态</p>
                <div v-if="item.seen">
                  <p style="font-size: 15px;color: rgb(40, 85, 168);">已读</p>
                </div>
                <div v-else>
                  <p style="font-size: 15px;color: rgb(160, 179, 20);">未读</p>
                </div>
              </template>
            </PageHeader>
          </div>
          <Modal v-model="modal1" draggable scrollable fullscreen footer-hide title="邮件详情">
            <Form ref="formValidate" :model="formValidate" :label-width="80">
              <FormItem label="昵称">
                <p>{{ formValidate.senderNickname }}</p>
              </FormItem>
              <FormItem label="发件人">
                <p>{{ formValidate.sender }}</p>
              </FormItem>
              <FormItem label="主题">
                <p>{{ formValidate.subject }}</p>
              </FormItem>
              <FormItem>
                <p>附件：</p>
                <div v-for="(file, index) in formValidate.attachmentName.split('?')" :key="index">
                  <a @click="downloadFile(file)">{{ file }}</a>
                </div>
              </FormItem>
              <FormItem label="正文">
                <div v-html="formValidate.content"></div>
              </FormItem>
            </Form>
          </Modal>
          <Modal v-model="modal2" title="删除邮件" @on-ok="confirmDelete" @on-cancel="cancelDelete">
            <p>你确定删除该邮件吗？</p>
          </Modal>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      // 控制邮件详情和删除确认的模态框
      modal1: false,
      modal2: false,
      // 存储当前选中的邮件信息
      formValidate: {
        senderNickname: '',
        sender: '',
        subject: '',
        content: '',
        attachmentName: ''
      },
      // 临时存储要删除的邮件ID
      emailIDtemp: '',
      // 图标数组，用于邮件列表的头像显示
      icons: [
        { icon: "https://img.51miz.com/preview/element/00/01/12/75/E-1127588-A2568E26.jpg" },
        { icon: "https://ts1.cn.mm.bing.net/th/id/R-C.c00f51dea7e54cac941d1bf3bf6e3a1e" },
        { icon: "https://ts1.cn.mm.bing.net/th/id/R-C.ab4acda29b8489d4838e8ca9e41c0783" },
        { icon: "https://static.pptstore.net/icons/80/49/fi_7c242d0cc892e9041578_s.png" }
      ],
      // 当前使用的邮件协议，初始值为POP3
      protocol: 'POP3'
    };
  },
  computed: {
    // 使用Vuex中的状态
    ...mapState(['emails', 'protocol', 'userID']),
  },
  created() {
    // 组件创建时加载邮件
    this.loadEmails();
  },
  methods: {
    // 使用Vuex中的actions
    ...mapActions(['getEmailsByPOP3', 'getEmailsByIMAP', 'deleteEmail', 'toggleFlag', 'setProtocol']),
    
    // 加载邮件，根据当前协议调用不同的action
    loadEmails() {
      if (this.protocol === 'POP3') {
        this.getEmailsByPOP3(this.userID);
      } else {
        this.getEmailsByIMAP(this.userID);
      }
    },

    // 显示邮件详情
    showEmail(index, emailID) {
      this.formValidate = this.emails[index];
      this.modal1 = true;
    },

    // 切换邮件协议
    changepro() {
      const newProtocol = this.protocol === 'POP3' ? 'IMAP' : 'POP3';
      this.setProtocol(newProtocol).then(() => {
        this.protocol = newProtocol;
        this.loadEmails();
      });
    },

    // 下载附件
    downloadFile(fileName) {
      const url = `/api/emails/download?userId=${this.userID}&fileName=${fileName}`;
      window.open(url, '_blank');
    },

    // 刷新邮件列表
    flesh() {
      this.loadEmails();
    },

    // 确认删除邮件
    confirmDelete() {
      this.deleteEmail(this.emailIDtemp).then(() => {
        this.modal2 = false;
        this.loadEmails();
      });
    },

    // 取消删除操作
    cancelDelete() {
      this.modal2 = false;
    },
  }
};
</script>

<style scoped>
/* 添加样式 */
</style>
